<!doctype html>

<html lang="en">

	<head>
		<meta charset="utf-8"/>
		<title>Less Framework 2</title>
		
		<link rel="stylesheet" href="assets/main.css?1.24" media="all"/>
		<!--[if lte IE 8]><script src="assets/html5.js"></script><![endif]-->
		<script type="text/javascript" src="http://use.typekit.com/sjr5tir.js"></script>
		<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
		<link rel="shortcut icon" href="assets/icon.png?v1.1"/>
		<script type="text/javascript">
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-3628636-8']);
			_gaq.push(['_trackPageview']);
			(function() {
		  		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		  		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		  		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		  	})();
		</script>
		<meta name="viewport" content="initial-scale=1.0, width=device-width, maximum-scale=1.0"/>
	</head>

	<body>
		
		<header>
			<h1>
				Less&nbsp;Framework&nbsp;2
			</h1>
			<p>
				Try resizing your browser&nbsp;window!
				<span>&mdash;&gt; &lt;&mdash;</span>
			</p>
		</header>
		
		<article>
			
			<section id="intro">
				<figure id="tablet">
					<img src="tablet.png" alt="Five-column layout on an iPad"/>
				</figure>
				<figure id="phone">
					<img src="phone.png" alt="Two-column layout on an iPhone"/>
				</figure>
				<figure id="browser">
					<img src="browser.png" alt="Eight-column layout in a desktop browser"/>
				</figure>
				<p>
					More or less a framework.
				</p>
			</section>
			
			<section id="about">
			
				<h1>A <abbr>CSS</abbr> framework for cross-device layouts</h1>
				<figure id="features">
					<span>
						.grid_5<br/>
						.clearfix<br/>
						960 px
					</span>
				</figure>
				<p>
					Everyone writes <abbr>CSS</abbr> differently. Less Framework takes this into account by having a minimal set of features, and does away with things like predefined classes. All it really contains are:
				</p>
				<ul>
					<li>a set of <a href="http://www.alistapart.com/articles/responsive-web-design/">media-queries</a></li>
					<li>typography presets aligned to a 24 px baseline grid</li>
					<li>and a grid, with its column sizes noted down within <abbr>CSS</abbr> comments.</li>
				</ul>
				<p>
					Nothing more, nothing less. It doesn&rsquo;t try to do anything for you, and doesn&rsquo;t change the way you work. 
				</p>
				<h1>No more 960 px</h1>
				<p>
					Less Framework uses inline <abbr>CSS3</abbr> media-queries to switch between three&nbsp;layouts:
				</p>
				<figure id="grids">
					<span>
						|| <br/>
						||||| <br/>
						||||||||
					</span>
				</figure>
				<ul>
					<li>a two-column layout at 320 px, for smartphones</li>
					<li>a five-column layout at 768 px, for iPads and netbooks</li>
					<li>and an eight-column layout at 1280 px, for desktops and laptops.</li>
				</ul>
				<p>
					The five-column layout is not inside a media-query block, which means the other two layouts inherit styles from it. You simply write the five-column layout first, then use the media-queries for the other two layouts to overwrite styles from it, like so:
				</p>
				<pre><code>body {width: 696px;}
				
@media only screen and (max-width: 767px) {
	body {width: 264px;}
}

@media only screen and (min-width: 1224px) {
	body {width: 1128px;}
}</code></pre>
				<p>	
					All three layouts essentially use the same grid. They all have the same column width (120 px), the same gutters (24 px), and the same vertical rhythm (24 px). The only things that change are the amount of columns and the margins around the layout. This means you're not designing three different layouts, but rather three variations of one layout.
				</p>
				
				<h1>No hacks, unless you want them</h1>
				<p>
					Less Framework works beautifully in Firefox, Chrome, Safari, Opera, <abbr>IE9</abbr> (hopefully), Android phones, and all iOS devices (that's all iPhones, iPads, and iPod Touches). 
				</p>
				<p>
					<strong>Note that user-zooming is currently disabled on iOS and Android</strong> due to an iOS bug related to automatic scaling in landscape orientation. You can enable user-zooming at your own discretion by removing &ldquo;maximum-scale=1.0&rdquo; from the meta viewport-tag.
				</p>
				<figure id="hacks">
					<span>
						<span>&#9745;</span> iOS <br/>
						<span>&#9745;</span> Droid
						<span>&#9745;</span> IE6*
					</span>
				</figure>
				<p>
					* Browsers that don't support media-queries, like <abbr>IE8</abbr> and below, simply ignore everything inside <em>inline</em> media-queries. This means they'll use the default five-column layout &ndash; which is more than sufficient for desktop usage &ndash; and ignore everything else.
				</p>
				<p>	
					However, if you'd like <abbr>IE</abbr> to support the other layouts as well, you can use something like <a href="http://code.google.com/p/css3-mediaqueries-js/">css3-mediaqueries-js</a>.
				</p>
				
				<h1>Getting started</h1>
				<p>
					First of all, note that Less Framework is free. It is licensed under a 
					<a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution License</a>,
					which means it's free to use for commercial and noncommercial purposes, and you can modify it as much as you like. However, I would appreciate an attribution-link back to this site, either somewhere on your site or inside a comment at the top of your main&nbsp;stylesheet. 
				</p>
				<p>
					Now, simply customize and copy-paste the code below, check out the comments in the <abbr>CSS</abbr>, and you'll figure it out in no time. 
				</p>
				
			</section>
			
			<section id="get">
				
				<form id="html" action="code/html.php" method="get">
					<h1>First, get the <abbr title="Hypertext Markup Language">HTML</abbr></h1>
					<label>
						<input type="checkbox" name="html5"/>
						Include <a href="http://code.google.com/p/html5shim/"><abbr>HTML5</abbr> shim</a>
						<small>
							Fixes the new <abbr>HTML5</abbr> elements (&lt;article>, &lt;header>, etc.) for <abbr title="Internet Explorer 8">IE8</abbr> and below.
						</small>
					</label>
					<label>
						<input type="checkbox" name="jquery"/>
						Include jQuery
						<small>
							Adds a link to jQuery via <a href="http://code.google.com/apis/libraries/">Google&rsquo;s <abbr title="Content Delivery Network">CDN</abbr></a>. Just for convenience, in case you need it.
						</small>
					</label>
					<textarea></textarea>
					<input type="submit" value="Get the code"/>
				</form>
				
				
				<form id="css" action="code/css.php" method="get">
					<h1>Then, get the <abbr title="Cascading Stylesheets">CSS</abbr></h1>
					<label>
						<input type="radio" name="xheight" value="large" checked="checked"/>
						Optimize for high x-height type
						<small>
							Type presets good for fonts like Helvetica or Georgia, based around 16 px body text.
						</small>
					</label>
					<label>
						<input type="radio" name="xheight" value="small"/>
						Optimize for low x-height type
						<small>
							Type presets good for fonts like Palatino or Times, based around 18 px body text.
						</small>
					</label>
					<label>
						<input type="checkbox" name="widescreen"/>
						Add optional 12-column layout
						<small>
							An extra layout for 1920 px screens and beyond. 12 columns at 1824 px.
						</small>
					</label>
					<label>
						<input type="checkbox" name="highDPI"/>
						Include high-<abbr>PPI</abbr> media-query
						<small>
							A media-query for devices with a device-pixel-ratio of 1.5+, like iPhone 4.
						</small>
					</label>
					<textarea></textarea>
					<input type="submit" value="Get the code"/>
				</form>
				
			</section>
			
		</article>
		
		<footer>
			<section id="author">
				<figure class="jk-logo" title="Joni Korpi">
					<div class="jk-1"></div>
					<div class="jk-2"></div>
					<div class="jk-3"></div>
					<div class="jk-4"></div>
					<div class="jk-5"></div>
					<div class="jk-6"></div>
					<div class="jk-7"></div>
				</figure>
				<p>
					Follow <a href="http://twitter.com/jonikorpi">@jonikorpi</a> or visit <a href="http://jonikorpi.com" rel="author">jonikorpi.com</a> for updates.
				</p>
			</section>
			<section id="powered-by">
				<p>
					This site runs on Less Framework 2.0, static <abbr title="Hypertext Markup Language 5">HTML5</abbr>, jQuery, and green tea.
					
					The typefaces used are 
					<a href="http://typekit.com/fonts/lft-etica-web"><abbr>LFT</abbr> Etica</a>, 
					<a href="http://typekit.com/fonts/skolar-web">Skolar</a>, and 
					<a href="http://typekit.com/fonts/felt-tip-roman">Felt Tip Roman</a>, 
					served via <a href="http://typekit.com">Typekit</a>.
				</p>
			</section>
			<section id="v1">
				<p>
					<em>Looking for <a href="http://lessframework.com/v1/">Less&nbsp;Framework&nbsp;1</a>?</em>
				</p>
			</section>
		</footer>
		
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script src="assets/form.js?1.2"></script>
		
	</body>

</html>